"use client"

import * as AvatarPrimitive from "@radix-ui/react-avatar"
import * as React from "react"

import { ny } from "~/lib/utils"

const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
      ref={ref}
      className={ny(
         "relative flex size-10 shrink-0 overflow-hidden rounded-full",
         className,
      )}
      {...props}
   />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
      ref={ref}
      className={ny("aspect-square size-full", className)}
      {...props}
   />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
      ref={ref}
      className={ny(
         "bg-muted flex size-full items-center justify-center rounded-full",
         className,
      )}
      {...props}
   />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
